<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import { getRightList, addRight, delRight, updateRight } from './system'
import { ElMessage } from 'element-plus'

onMounted(() => {
  handleGetRightList()
})

const dataSource = ref([]),
  dialogAdd = ref(false),
  dialogTitle = ref('新增权限'),
  form = reactive({
    rightName: '',
    router: [],
    id: '',
    rightKey: '',
    remark: ''
  }),
  rightList = ref([
    {
      label: '首页',
      value: 'index'
    },
    {
      label: '船舶',
      value: 'chuanbo'
    },
    {
      label: '港口',
      value: 'gangkou'
    },
    {
      label: '系统管理',
      value: 'system'
    }
  ]);

const restForm = () => {
  form.rightName = ''
  form.router = []
  form.id = ''
  form.rightKey = ''
  form.remark = ''
}

const handleGetRightList = () => {
  getRightList()
    .then(res => {
      dataSource.value = res.data.data
    })
    .catch(err => {
      ElMessage.error(err)
    })
}

const handleAdd = () => {
  if (dialogTitle.value == '新增权限') {
    addRight({
      ...form,
      router: form.router.join(',')
    })
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('添加成功')
          dialogAdd.value = false
          handleGetRightList()
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  } else {
    updateRight({
      ...form,
      router: form.router.join(',')
    })
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('修改成功')
          dialogAdd.value = false
          handleGetRightList()
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  }
},
  handleClose = () => {
    dialogAdd.value = false
  },
  handleDelete = (row) => {
    delRight(row)
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('删除成功')
          handleGetRightList()
        } else {
          ElMessage.error('删除失败,请先删除该权限下的角色')
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  }

const startAdd = () => {
  dialogAdd.value = true
  dialogTitle.value = '新增权限'
  restForm()
},
  startEdit = (item) => {
    dialogAdd.value = true
    dialogTitle.value = '编辑权限'
    form.rightName = item.rightName
    form.router = item.router.split(',')
    form.id = item.id
    form.rightKey = item.rightKey
    form.remark = item.remark
  }
</script>

<template>
  <div class="Right">
    <div class="card_hook">
      <el-button style="width: 60px;" size="default" @click="startAdd">新增</el-button>

      <el-table :data="dataSource" style="width: 100%" height="100%">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="rightName" label="权限名" width="150" />
        <el-table-column prop="rightKey" label="权限标识" width="120" />
        <!-- <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="updatedAt" label="更新时间" />
        <el-table-column prop="loginCount" label="登录次数" /> -->
        <el-table-column prop="router" label="可访问路由">
          <template #default="{ row }">
            <!-- {{ rightList.filter(v => {
              return row.router.split(',').includes(v.value)
            }).map(v => {
              return v.label
            }).join(',') }} -->

            <el-tag size="large" style="margin: 5px;font-size: 14px;font-family: '阿里妈妈方圆体';" v-for="item in  rightList.filter(v => {
              return row.router.split(',').includes(v.value)
            }).map(v => {
              return v.label
            })">
              {{ item }}
            </el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" width="400" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="startEdit(row)" :disabled="row.admin == '1'">编辑</el-button>
            <!-- <el-button type="danger" size="small" @click="">删除</el-button> -->
            <el-popconfirm title="确定要删除么?" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" size="small" :disabled="row.admin == '1'">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 1 -->
    <el-dialog v-model="dialogAdd" :title="dialogTitle" width="30%" :before-close="handleClose">
      <!-- 添加权限的表单 -->
      <el-form :model="form" label-width="80px">
        <el-form-item label="权限名" prop="roleName">
          <el-input v-model="form.rightName" placeholder="请输入权限名"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="roleKey">
          <el-input v-model="form.rightKey" placeholder="请输入权限标识"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="form.router" style="display: grid;grid-template-columns:1fr 1fr">
            <el-checkbox v-for="item in rightList" :label="item.value" :key="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAdd = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<style lang='less' scoped>
.Right {
  width: 100%;
  height: 100%;
  padding: 7px;

  .card_hook {
    height: 100%;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .editable-row-operations a {
      margin-right: 8px;
    }
  }
}
</style>